<!-- <ng-container *ngIf="load">
    <div>
        <div class="plus" [ngStyle]="{
            'left':blockModel.AddCoordinates.x,
            'top':blockModel.AddCoordinates.y}" (click)="addBlock(blockModel)">
            +
        </div>
        <div class="block" *ngFor="let item2 of blockModel.data" [ngStyle]="{
            'left':item2.Coordinates.x,
            'top':item2.Coordinates.y,
            'height':blockModel.BlockHeight+'%',
            'width':blockModel.BlockWidth+'%',
            'background':blockModel.BackgroundColor,
            'color':blockModel.color
          }">
            <div *ngFor="let item3 of item2.Anchor">
                <div class="plus" [ngStyle]="{
                    'left':item3.AddCoordinate[0].x,
                    'top':item3.AddCoordinate[0].y, 
                    'background':item3.AddColor?item3.AddColor:item3.Color,
                    'color':item3.AddSmColor?item3.AddSmColor:'#fff'}" (click)="addNote(item3.PK_AnchorGuid,item2.PK_BlockGuid,item3.HaveAuthor,item3.HaveTitle)">
                    +
                </div>
                <div class="note" *ngFor="let item4 of item3.Coordinate" [ngStyle]="{
                    'left':item4.x,
                    'top':item4.y,
                    'height':item3.NoteHeight+'%',
                    'width':item3.NoteWidth+'%'}" (click)="openAdd(item3,item2)" (mouseenter)="noteHover(hover,item4,item2.PK_BlockGuid)" (mouseleave)="noteHoverEnd(hover,item4)">
                    <ng-container *ngFor="let note of item4.note;let i=index;">
                        <ng-container *ngIf="note.FK_BlockGuid==item2.PK_BlockGuid">
                            <ng-container *ngIf="i>(item4.note.length-5)">
                                <div class="note-box shadow" [ngStyle]="{
                        'color':item3.FontColor,
                        'background':item3.Color,
                        'margin-left':''+((i-(item4.note.length))*4)+'px',
                        'margin-top':''+((i-(item4.note.length))*4)+'px'
                    }">
                                    <ng-container *ngIf="i==item4.note.length-1">
                                        <div class="note-title" *ngIf="item3.HaveTitle">{{note?.Title}}</div>
                                        <div class="note-content">
                                            {{note?.Content}}
                                        </div>
                                        <div class="another" *ngIf="item3.HaveAuthor">
                                            _ {{note?.Name}}
                                        </div>
                                    </ng-container>
                                    <ng-container *ngIf="item4.note.length>1">
                                        <span class="num" *ngIf="(i+1)==item4.note.length">{{i+1}}</span>
                                    </ng-container>
                                </div>
                            </ng-container>
                        </ng-container>
                    </ng-container>

                    <div class="hover" #hover [ngStyle]="{
                        'height':item4.note.length>2?'200%':'100%'
                    }">
                        <ng-container *ngFor="let note of item4.note;let i=index;">
                            <ng-container *ngIf="i>(item4.note.length-5)">
                                <div class="hovernote" [ngStyle]="{
                                            'color':item3.FontColor,
                                            'margin-right':i%2 ==0?'2px':'0px'
                                        }" [style.background]="item3.Color">
                                    <div class="hovernote-title" *ngIf="item3.HaveTitle">{{note.Title}}</div>
                                    <div class="content">
                                        {{note.Content}}
                                    </div>
                                    <div class="name" *ngIf="item3.HaveAuthor">
                                        _ {{note.Name}}
                                    </div>
                                </div>
                            </ng-container>
                        </ng-container>
                    </div>

                </div>
            </div>
        </div>
    </div>
</ng-container>

<ng-container *ngIf="!load">
    <div class="load" style="height: 100%;display: flex;align-items: center;justify-content: center;">
        <nz-spin [nzSize]="'large'"></nz-spin>
    </div>

</ng-container>

<canvas-add-root *ngIf="canopenadd" (onCloseAdd)="closeAdd($event)" (onAdd)="add($event)" [pointdata]="pointdata" (deldata)="del($event)"></canvas-add-root>
<mask-root *ngIf="addwindow" [opacity]="'0'" (onClick)="addwindow=false;"></mask-root>
<addbox-root *ngIf="addwindow" [config]="config" (onok)="onok($event)" (oncancel)="oncancel($event)"></addbox-root> -->
<ng-container *ngIf="load">
    <div>
        <div class="plus" [ngStyle]="{
                'left':blockModel.AddCoordinates.x,
                'top':blockModel.AddCoordinates.y}" (click)="addBlock(blockModel)">
            +
        </div>
        <div class="block" *ngFor="let item2 of blockModel.data" [ngStyle]="{
                'left':item2.Coordinates.x,
                'top':item2.Coordinates.y,
                'height':blockModel.BlockHeight+'%',
                'width':blockModel.BlockWidth+'%',
                'background':blockModel.BackgroundColor,
                'color':blockModel.color
              }">
            <div *ngFor="let item3 of item2.Anchor">
                <div class="plus" [ngStyle]="{
                        'left':item3.AddCoordinate[0].x,
                        'top':item3.AddCoordinate[0].y, 
                        'background':item3.AddColor?item3.AddColor:item3.Color,
                        'color':item3.AddSmColor?item3.AddSmColor:'#fff'}" (click)="addNote(item3.PK_AnchorGuid,item2.PK_BlockGuid,item3.HaveAuthor,item3.HaveTitle)">
                    +
                </div>
                <div class="note" *ngFor="let item4 of item3.Coordinate" [ngStyle]="{
                        'left':item4.x,
                        'top':item4.y,
                        'height':item3.NoteHeight+'%',
                        'width':item3.NoteWidth+'%'}" (click)="openAdd(item3,item2)" (mouseenter)="noteHover(hover,item3,item2.PK_BlockGuid)" (mouseleave)="noteHoverEnd(hover,item3)">
                    <ng-container *ngFor="let note of item3.note;let i=index;">
                        <ng-container *ngIf="note.FK_BlockGuid==item2.PK_BlockGuid">
                            <ng-container *ngIf="i>(item3.note.length-5)">
                                <div class="note-box shadow" [ngStyle]="{
                            'color':item3.FontColor,
                            'background':item3.Color,
                            'margin-left':''+((i-(item3.note.length))*4)+'px',
                            'margin-top':''+((i-(item3.note.length))*4)+'px'
                        }">
                                    <ng-container *ngIf="i==item3.note.length-1">
                                        <div class="note-title" *ngIf="item3.HaveTitle">{{note?.Title}}</div>
                                        <div class="note-content">
                                            {{note?.Content}}
                                        </div>
                                        <div class="another" *ngIf="item3.HaveAuthor">
                                            _ {{note?.Name}}
                                        </div>
                                    </ng-container>
                                    <ng-container *ngIf="item3.note.length>1">
                                        <span class="num" *ngIf="(i+1)==item3.note.length">{{i+1}}</span>
                                    </ng-container>
                                </div>
                            </ng-container>
                        </ng-container>
                    </ng-container>

                    <div class="hover" #hover [ngStyle]="{
                            'height':item3.note.length>2?'200%':'100%'
                        }">
                        <ng-container *ngFor="let note of item3.note;let i=index;">
                            <ng-container *ngIf="i>(item3.note.length-5)">
                                <div class="hovernote" [ngStyle]="{
                                                'color':item3.FontColor,
                                                'margin-right':i%2 ==0?'2px':'0px'
                                            }" [style.background]="item3.Color">
                                    <div class="hovernote-title" *ngIf="item3.HaveTitle">{{note.Title}}</div>
                                    <div class="content">
                                        {{note.Content}}
                                    </div>
                                    <div class="name" *ngIf="item3.HaveAuthor">
                                        _ {{note.Name}}
                                    </div>
                                </div>
                            </ng-container>
                        </ng-container>
                    </div>

                </div>
            </div>
        </div>
    </div>
</ng-container>

<ng-container *ngIf="!load">
    <div class="load" style="height: 100%;display: flex;align-items: center;justify-content: center;">
        <nz-spin [nzSize]="'large'"></nz-spin>
    </div>

</ng-container>

<canvas-add-root *ngIf="canopenadd" (onCloseAdd)="closeAdd($event)" (onAdd)="add($event)" [pointdata]="pointdata" (deldata)="del($event)"></canvas-add-root>
<mask-root *ngIf="addwindow" [opacity]="'0'" (onClick)="addwindow=false;"></mask-root>
<addbox-root *ngIf="addwindow" [config]="config" (onok)="onok($event)" (oncancel)="oncancel($event)"></addbox-root>